<template>
  <div class="masters">
    <div class="tab-bar">
      <div v-for="(v, i) in tabs" :key="'tab' + i" :class="['tab-item', {active: v.types.includes(infotype)}]" @click="tabChange(v.types)">
        <span>{{v.title}}</span>
        <div v-if="v.types.length > 1" :class="{sort: true, up: v.types[0] == infotype, down: v.types[1] == infotype}"></div>
      </div>
    </div>
    <scroller class="scroller" noDataText="没有更多了" :on-refresh="refresh" :on-infinite="infinite">
      <mlist :masters="masters"></mlist>
    </scroller>
  </div>
</template>

<script>
import mlist from '@/views/master/mlist';

export default {
  components: {
    mlist,
  },
  data() {
    return {
      tabs: [
        {
          title: '人气优先',
          types: ['2'],
        },
        {
          title: '价格排序',
          types: ['4', '5'],
        },
        {
          title: '新晋大师',
          types: ['3'],
        },
      ],
      offset: 0,
      limit: 5,
      masters: [],
    }
  },
  computed: {
    tags() {
      return this.$route.query.tags || '';
    },
    infotype() {
      return this.$route.query.infotype || 1;
    },
    serviceId() {
      return this.$route.query.serviceId || '';
    }
  },
  watch: {
    infotype() {
      this.offset = 0;
      this.getMasters();
    }
  },
  methods: {
    tabChange(t) {
      var {serviceId, infotype} = this;
      infotype = t.length == 1 ? t[0] : infotype == t[0] ? t[1] : t[0];

      this.$router.replace({
        path: '/masters',
        query: {serviceId, infotype},
      });
    },
    getMasters(done) {
      this.$http.fetchGet('getmasterlist', {
        tag_ids: this.tags,
        serviceId: this.serviceId,
        infotype: this.infotype,
        offset: this.offset,
        limit: this.limit,
      }).then(({data = []}) => {
        console.log('大师列表' + this.offset, data);
        if(this.offset == 0) this.masters = data;
        else this.masters.push(...data);
        done && done(!data.length);
				if(data.length == 0) this.offset -= this.limit;
      }, err => {
        this.offset -= this.limit;
        done(true);
      })
    },
    refresh(done) {
      console.log(done)
      this.offset = 0;
      this.getMasters(done);
    },
    infinite(done) {
      console.log(done)
      this.offset += this.limit;
      this.getMasters(done);
    },
  },
  created() {
    this.getMasters();
  }
}
</script>

<style scoped lang="less">
.tab-bar{
  .f28;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  .h(98);
  border-bottom: 1px solid @bdColor;
  background-color: #ffffff;
  display: flex;
  .tab-item{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    &.active{
      color: @primary;
    }
    .sort{
      .ml(10);
      &:before{
        content: '';
        display: block;
        border: .133333rem solid transparent;
        border-bottom-color: #000;
        .mb(5);
      }
      &:after{
        content: '';
        display: block;
        border: .133333rem solid transparent;
        border-top-color: #000;
      }
      &.up{
        &:after{
          border-top-color: #ccc;
        }
      }
      &.down{
        &:before{
          border-bottom-color: #ccc;
        }
      }
    }
  }
}
.scroller{
  box-sizing: border-box;
  .pt(98);
}
</style>
